<template>
  <nav class="navbar">
    <div class="left">
      <img src="../assets/logo.png" alt="logo" class="logo" />
      <!-- <router-link to="/articleList">搜文章</router-link> -->
      <!-- <router-link to="/userList">搜用户</router-link> -->
      <!-- <router-link to="/notLogin">未登录</router-link> -->
      <!-- <router-link to="/test">测试</router-link> -->
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-link to="/reset">找回</router-link>
      <router-link to="/user">我的</router-link>
      <router-link to="/userForm">账号编辑</router-link>
      <router-link to="/home">首页</router-link>
    </div>

    
    <div class="center">
      <button class="changeBtn" @click="handleChange">{{ searchSetting }}</button>
      <input type="text" class="search"  @keyup.enter="handleSearch" v-model="title"/>
    </div>
    <!-- placeholder="请输入..." -->

    <div class="right">
      <router-link to="/user">
        <img :src="avatar" class="avatar" alt="用户" />
      </router-link>
      <router-link to="/userArticle">文章管理</router-link>
      <router-link to="/userCollect">收藏</router-link>
      <router-link to="/userFocus">关注</router-link>
      <router-link to="/userFriend">好友</router-link>
      <router-link to="/userHistory">历史</router-link>
      <router-link to="/userDialogue">聊天</router-link>
      <button class="upload" @click="logout">退出</button>
      <!-- <span class="badge">30</span> -->
    </div>
  </nav>
</template>








<script setup>
import { onMounted, ref } from 'vue';
import { emitter } from '@/router/eventBus';
import { useRouter } from 'vue-router';
import { searchArticle } from '@/api/BlogVisit';
import { searchUser } from '@/api/BlogVisit';
import server from '@/api/server';
import xixiPng from '@/assets/xixi.png'

const router = useRouter();

const avatar = ref("")

const searchSetting = ref("文章")

const title = ref('')

const handleChange = ()=>{
  if(searchSetting.value == "文章"){
    searchSetting.value = "用户"
  }else{
    searchSetting.value = "文章"
  }
}

const handleSearch = ()=>{
  if(title.value == ''){
    alert("必须至少输入一个字符！！！")
    return
  }
  if(searchSetting.value == "文章"){
    searchArticleFunc()
  }else{
    searchUserFunc()
  }
}

const searchArticleFunc = ()=>{
  const params = {
    title: title.value
  }
  try {
    searchArticle(server.token, params).then((res)=>{
      if(res.data.code==0){
        server.searchMsg = "根据文章标题搜索："
        server.searchData = res.data
        emitter.emit('user_searched', "haha")
        router.push('/articleList')
      }else{
        alert("搜索失败：" + res.data.msg)
      }
    })
  } catch (error) {
        alert("搜索失败：" + error)
  }
}

const searchUserFunc = ()=>{
  const params = {
    nickname: title.value
  }
  try {
    searchUser(params).then((res)=>{
      console.log(res.data)
      if(res.data.code==0){
        server.searchMsg = "根据用户昵称搜索："
        server.searchData = res.data
        emitter.emit('user_searched', "haha")
        router.push('/userList')
      }else{
        alert("搜索失败：" + res.data.msg)
      }
    })
  } catch (error) {
        alert("搜索失败：" + error)
  }
}


emitter.on('avatar_change', (data) => {
  avatar.value = data.data.avatar
});

onMounted(()=>{
  avatar.value = xixiPng;
});

const logout =()=>{
  server.token = '';
  router.push('/login')
  avatar.value = xixiPng;
}

</script>













<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #000, #1c1c3c, #000);
  padding: 10px 20px;
  color: white;
  font-size: 14px;
}

.left a, .right a {
  margin: 0 8px;
  color: white;
  text-decoration: none;
}

.left a:hover, .right a:hover {
  color: #ff86b2;
}

.logo {
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}

.center {
  display: flex;flex-flow: row nowrap;
  justify-content: center;align-items: center;
}

.search {
  width: 200px;height: 20px;
  padding: 5px;
  border-radius: 20px;
  border: none;outline: none;
}

.changeBtn{
  width: 40px;height: 28px;
  margin-right: 2px;

  font-size: 12px;
  border-radius: 20px;
  border: none;outline: none;
}

.right {
  display: flex;
  align-items: center;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.upload {
  background-color: #ff6699;
  border: none;
  color: white;
  padding: 6px 12px;
  margin-left: 8px;
  border-radius: 4px;
  cursor: pointer;
}

.upload:hover {
  background-color: #ff3366;
}

.badge {
  background: red;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  margin-left: 2px;
}
</style>
